import { makeStyles, ax } from '@fluentui/react-make-styles';
import { {{componentName}}State } from './{{componentName}}.types';

/**
 * Styles for the root slot
 */
const useStyles = makeStyles({
  root: theme => ({
      // TODO Add default styles for the root element
  }),

  // TODO add additional classes for different states and/or slots
});

/**
 * Apply styling to the {{componentName}} slots based on the state
 */
export const use{{componentName}}Styles = (state: {{componentName}}State): {{componentName}}State => {
  const styles = useStyles();
  state.className = ax(styles.root, state.className);

  // TODO Add class names to slots, for example:
  // state.mySlot.className = ax(styles.mySlot, state.mySlot.className);

  return state;
};
